/**
 * 我的钱包
 */
<template>
  <div class="main_h">
    <!-- 钱包 -->
    <el-row
      :gutter="20"
      type="flex"
      justify="space-between"
      class="wallet_box"
      v-if="userInfo"
    >
      <el-col :span="13">
        <el-card class="card_wallet card_card1">
          <div class=" card_title">
            <span class="til"> 中心钱包 </span>
            <span class="font-w6">ID：{{ userInfo.userId }}</span>
          </div>
          <el-row type="flex" justify="space-between">
            <el-col :span="18">
              <el-carousel
                arrow="always"
                :autoplay="false"
                @change="changeCard" 
              >
                <el-carousel-item v-for="item in carouselList" :key="item.id">
                  <div
                    class="card_c text-white"
                    :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }"
                  >
                    <el-row type="flex" class="receivingCode font20">
                      <span>{{ numberNo(userInfo.receivingCode, 4, 4) }}</span>
                      <img
                        class="pointer margin-l20"
                        src="~@/assets/img/file-copy.png"
                        @click="copyText(userInfo.receivingCode)"
                      />
                    </el-row>
                    <div class="card_name">
                      {{ userInfo.userName }}
                    </div>
                    <div class="card_time">
                      {{ formatTime(userInfo.createTime) }}
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </el-col>
            <el-col :span="6" class="aline-r padding-r35">
              <div class="font28 font-w7 margin-t30 text-blues text-nocut">
                <span class="font16">$</span>
                {{ b(userInfo.balance) }}
              </div>
              <div class="font14 r_title">中心钱包余额</div>

              <div class="font25 font-w7 margin-t20 text-gree">
                <span class="font16">$</span>
                {{ b(userInfo.params.cardBalance) }}
              </div>
              <div class="font14 r_title">Gwhale卡余额</div>

              <div class="font25 font-w7 margin-t20 text-red" >
                <span class="font16">$</span>
                {{ userInfo.matrixBalance }}
              </div>
              <div class="font14 r_title" >Gwhale卡钱包余额</div> 
              

              <div class="font25 font-w7 margin-t20 " v-if="userInfo.budgetAccountId">
                <span class="font16">$</span>
                {{ b(userInfo.budgetBalance) }}
              </div>
              <div class="font14 r_title" v-if="userInfo.budgetAccountId">星汇卡钱包余额</div>
              <!-- <div class="font20 font-w7 margin-t20 text-red" v-if="!userInfo.matrixBalance">
                <span class="font16">$</span>
                ******
              </div>
              <div class="font14 r_title" v-if="!userInfo.matrixBalance">敬请期待</div> --> 
            <!-- class="butL" -->
            <!-- <el-button size="small" type="primary" round @click="toAdd" v-if="userInfo.userType != '02'&&hasPermission"
            >充值</el-button>
            <el-button size="small" type="warning" round @click="getInfo">
              刷新
            </el-button> -->
            </el-col>
          </el-row>

          <div class="progressBox"> 
            <div style="width: 80%;">
              <el-row
              type="flex"
              justify="space-between"
              align="middle"
              class="pro_box "
            >
              <el-col :span="7">
                <el-progress
                  type="circle"
                  :percentage="
                    userInfo.params.transactionCount == 0&&WfDataInfo.transactionCountWf==0
                      ? 0
                      : Math.round(
                          ((userInfo.params.refuseCount + WfDataInfo.refuseCountWf) /
                          (userInfo.params.transactionCount + WfDataInfo.transactionCountWf )) *
                            100
                        )
                  "
                  color="#439A86"
                  define-back-color="#CFCACA"
                  :width="60"
                ></el-progress>
                <div class="aline-c">
                  <div class="font15 font-w6">拒付率</div>
                  <div class="pro_t margin-t5">
                    <span>{{ userInfo.params.refuseCount }}</span>
                    /
                    {{ userInfo.params.transactionCount + WfDataInfo.transactionCountWf }}
                  </div>
                </div>
              </el-col>

              <el-col :span="7">
                <el-progress
                  type="circle"
                  :percentage="
                    userInfo.params.transactionCount == 0**WfDataInfo.transactionCountWf==0
                      ? 0
                      : Math.round(
                          ((userInfo.params.refundCount + WfDataInfo.refundCountWf) /
                            (userInfo.params.transactionCount + WfDataInfo.transactionCountWf )) *
                            100
                        )
                  "
                  color="#439A86"
                  define-back-color="#CFCACA"
                  :width="60"
                ></el-progress>
                <div class="aline-c">
                  <div class="font15 font-w6">退款率</div>
                  <div class="pro_t margin-t5">
                    <span>{{ userInfo.params.refundCount + WfDataInfo.refundCountWf }}</span>
                    /
                    {{ userInfo.params.transactionCount + WfDataInfo.transactionCountWf }}
                  </div>
                </div>
              </el-col>

              <el-col :span="10">
                <el-progress
                  type="circle"
                  :percentage="
                    userInfo.params.transactionAmount == 0 && WfDataInfo.transactionAmountWf ==0
                      ? 0
                      : Math.round(
                          ((userInfo.params.refundAmount + WfDataInfo.refundAmountWf) /
                            (userInfo.params.transactionAmount + WfDataInfo.transactionAmountWf)) *
                            100
                        )
                  "
                  color="#439A86"
                  define-back-color="#CFCACA"
                  :width="60"
                ></el-progress>
                <div class="aline-c">
                  <div class="font15 font-w6">退款金额率</div>
                  <div class="pro_t margin-t5">
                    <span>{{ userInfo.params.refundAmount + WfDataInfo.refundAmountWf }}</span>
                    /
                    {{ userInfo.params.transactionAmount + WfDataInfo.transactionAmountWf }}
                  </div>
                </div>
              </el-col>
            </el-row>
            </div> 

          <div >
            <!-- class="butL" -->
            <el-button size="small" type="primary" round @click="toAdd" v-if="userInfo.userType != '02'&&hasPermission"
              >充值</el-button
            >
            <el-button size="small" type="warning" round @click="getInfo">
              刷新
            </el-button>
          </div> 


          </div>
         
          
        </el-card> 

        <el-card class="card_wallet margin-t15 order_box " v-if="hasPermission0">
          <div class="font20 margin-b20  card_title">
            <span class="til">Gwhale卡</span>
          </div> 
          <div class="progressBox"> 
            <div style="width: 100%;">
              <el-row
              type="flex"
              justify="space-between"
              align="middle"
              class="pro_box "
            >
              <el-col :span="8">
                <el-progress
                  type="circle"
                  :percentage="
                    userInfo.params.transactionCount == 0
                      ? 0
                      : Math.round(
                          (userInfo.params.refuseCount /
                            userInfo.params.transactionCount) *
                            100
                        )
                  "
                  color="#439A86"
                  define-back-color="#CFCACA"
                  :width="60"
                ></el-progress>
                <div class="aline-c">
                  <div class="font15 font-w6">拒付率</div>
                  <div class="pro_t margin-t5">
                    <span>{{ userInfo.params.refuseCount }}</span>
                    /
                    {{ userInfo.params.transactionCount }}
                  </div>
                </div>
              </el-col>

              <el-col :span="8">
                <el-progress
                  type="circle"
                  :percentage="
                    userInfo.params.transactionCount == 0
                      ? 0
                      : Math.round(
                          (userInfo.params.refundCount /
                            userInfo.params.transactionCount) *
                            100
                        )
                  "
                  color="#439A86"
                  define-back-color="#CFCACA"
                  :width="60"
                ></el-progress>
                <div class="aline-c">
                  <div class="font15 font-w6">退款率</div>
                  <div class="pro_t margin-t5">
                    <span>{{ userInfo.params.refundCount }}</span>
                    /
                    {{ userInfo.params.transactionCount }}
                  </div>
                </div>
              </el-col>

              <el-col :span="8">
                <el-progress
                  type="circle"
                  :percentage="
                    userInfo.params.transactionAmount == 0
                      ? 0
                      : Math.round(
                          (userInfo.params.refundAmount /
                            userInfo.params.transactionAmount) *
                            100
                        )
                  "
                  color="#439A86"
                  define-back-color="#CFCACA"
                  :width="60"
                ></el-progress>
                <div class="aline-c">
                  <div class="font15 font-w6">退款金额率</div>
                  <div class="pro_t margin-t5">
                    <span>{{ userInfo.params.refundAmount }}</span>
                    /
                    {{ userInfo.params.transactionAmount }}
                  </div>
                </div>
              </el-col>
            </el-row>
            </div> 
          <div >
            
          </div>  
          </div> 
        </el-card>

        <el-card class="card_wallet margin-t15 order_box " v-if="hasPermission0&&userInfo.budgetAccountId"> 
          <div class="font20 margin-b20  card_title">
            <span class="til">星汇卡</span>
          </div> 
          <div class="progressBox"> 
            <div style="width: 100%;">
              <el-row
              type="flex"
              justify="space-between"
              align="middle"
              class="pro_box "
            >
              <el-col :span="8">
                <el-progress
                  type="circle"
                  :percentage="
                    WfDataInfo.transactionCount == 0
                      ? 0
                      : Math.round(
                          (WfDataInfo.refuseCountWf /
                          WfDataInfo.transactionCountWf) *
                            100
                        )
                  "
                  color="#439A86"
                  define-back-color="#CFCACA"
                  :width="60"
                ></el-progress>
                <div class="aline-c">
                  <div class="font15 font-w6">拒付率</div>
                  <div class="pro_t margin-t5">
                    <span>{{ WfDataInfo.refuseCountWf }}</span>
                    /
                    {{ WfDataInfo.transactionCountWf }}
                  </div>
                </div>
              </el-col>

              <el-col :span="8">
                <el-progress
                  type="circle"
                  :percentage="
                    WfDataInfo.transactionCountWf == 0
                      ? 0
                      : Math.round(
                          (WfDataInfo.refundCountWf /
                          WfDataInfo.transactionCountWf) *
                            100
                        )
                  "
                  color="#439A86"
                  define-back-color="#CFCACA"
                  :width="60"
                ></el-progress>
                <div class="aline-c">
                  <div class="font15 font-w6">退款率</div>
                  <div class="pro_t margin-t5">
                    <span>{{ WfDataInfo.refundCountWf }}</span>
                    /
                    {{ WfDataInfo.transactionCountWf }}
                  </div>
                </div>
              </el-col>

              <el-col :span="8">
                <el-progress
                  type="circle"
                  :percentage="
                    WfDataInfo.transactionAmountWf == 0
                      ? 0
                      : Math.round(
                          (WfDataInfo.refundAmountWf /
                          WfDataInfo.transactionAmountWf) *
                            100
                        )
                  "
                  color="#439A86"
                  define-back-color="#CFCACA"
                  :width="60"
                ></el-progress>
                <div class="aline-c">
                  <div class="font15 font-w6">退款金额率</div>
                  <div class="pro_t margin-t5">
                    <span>{{ WfDataInfo.refundAmountWf }}</span>
                    /
                    {{ WfDataInfo.transactionAmountWf }}
                  </div>
                </div>
              </el-col>
            </el-row>
            </div> 
          <div >
           
          </div>  
          </div> 
        </el-card>

      </el-col>
      <el-col :span="11" class="stat ">
        <div class="font20  card_title" >
          <span class="til">卡交易统计</span>  
        </div>
        <el-row type="flex"  justify="space-between" :gutter="10">
          <el-col  :span="8">
            <el-card class="margin-t20">
              <div class="stat_box">
                <div>
                  <span class="font16"
                    >${{ b(userInfo.params.transferAmount) }}</span
                  >
                  <div class="font12 text-gray margin-t10">
                    <!-- {{ formatDate(new Date()) }} -->
                  </div>
                </div>
                <img
                  class="stat_i"
                  src="~@/assets/img/nextjs-icon.png"
                  alt=""
                  srcset=""
                />
              </div>
              <img
                class="stat_m"
                src="~@/assets/img/bank-card-2-line.png"
                alt=""
                srcset=""
              />
              <div class="font14 margin-t5">Gwhale卡转入</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="margin-t20">
              <div class="stat_box">
                <div>
                  <span class="font16">
                    ${{ b(userInfo.params.transactionAmount) }}
                  </span>
                  <div class="font12 text-gray margin-t10">
                    <!-- {{ formatDate(new Date()) }} -->
                  </div>
                </div>
                <img class="stat_i" src="~@/assets/img/nextjs-icon.png" />
              </div>
              <img class="stat_m" src="~@/assets/img/maki_mountain-15.png" />
              <div class="font14 margin-t5">Gwhale卡消费</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="margin-t20">
              <div class="stat_box">
                <div>
                  <span class="font16"
                    >${{ b(userInfo.params.refundAmount) }}</span
                  >
                  <div class="font12 text-gray margin-t10">
                    <!-- {{ formatDate(new Date()) }} -->
                  </div>
                </div>
                <img class="stat_i" src="~@/assets/img/nextjs-icon.png" />
              </div>
              <img
                class="stat_m"
                src="~@/assets/img/vuesax_outline_card-edit.png"
              />
              <div class="font14 margin-t5">Gwhale卡退款</div>
            </el-card>
          </el-col>
        </el-row>

        <el-row type="flex"  justify="space-between" :gutter="10" v-if="userInfo.budgetAccountId">
          <el-col  :span="8">
            <el-card class="margin-t20">
              <div class="stat_box">
                <div>
                  <span class="font16"
                    >$0</span
                  >
                  <div class="font12 text-gray margin-t10">
                    <!-- {{ formatDate(new Date()) }} -->
                  </div>
                </div>
                <img
                  class="stat_i"
                  src="~@/assets/img/nextjs-icon.png"
                  alt=""
                  srcset=""
                />
              </div>
              <img
                class="stat_m"
                src="~@/assets/img/bank-card-2-line.png"
                alt=""
                srcset=""
              />
              <div class="font14 margin-t5">星汇卡转入</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="margin-t20">
              <div class="stat_box">
                <div>
                  <span class="font16">
                    ${{ b(WfDataInfo.transactionAmountWf) }}
                  </span>
                  <div class="font12 text-gray margin-t10">
                    <!-- {{ formatDate(new Date()) }} -->
                  </div>
                </div>
                <img class="stat_i" src="~@/assets/img/nextjs-icon.png" />
              </div>
              <img class="stat_m" src="~@/assets/img/maki_mountain-15.png" />
              <div class="font14 margin-t5">星汇卡消费</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="margin-t20">
              <div class="stat_box">
                <div>
                  <span class="font16"
                    >${{ b(WfDataInfo.refundAmount) }}</span
                  >
                  <div class="font12 text-gray margin-t10">
                    <!-- {{ formatDate(new Date()) }} -->
                  </div>
                </div>
                <img class="stat_i" src="~@/assets/img/nextjs-icon.png" />
              </div>
              <img
                class="stat_m"
                src="~@/assets/img/vuesax_outline_card-edit.png"
              />
              <div class="font14 margin-t5">星汇卡退款</div>
            </el-card>
          </el-col>
        </el-row>


        <el-card class="margin-t10 "  v-if="userInfo.agent">
          <div class="font18 margin-b10 card_title">
            <span class="til">
              代理商统计 
            </span> 
            （本月1日至当前时间截止）
          </div>
          <el-row :gutter="20" class="agantBox" style="text-align: center;"> 
            <el-col :span="5"> 
                <h3>${{ userInfo.params.totalAmount||WfDataInfo.totalAmountWf? b(userInfo.params.totalAmount + WfDataInfo.totalAmountWf):0 }}</h3>
                <p>代理商交易总额</p>
            </el-col>

            <el-col :span="5">
                <h3>${{ userInfo.params.returnRate||WfDataInfo.returnRateWf?b(userInfo.params.returnRate+WfDataInfo.returnRateWf):0 }}</h3>
                <p>退款金额率</p>
            </el-col> 

            <el-col :span="4">
                <h3 style="color: #439A86;" v-if="userInfo.params.execRate>0||WfDataInfo.execRateWf">{{ (userInfo.params.execRate+WfDataInfo.execRateWf)*100 }}%</h3>
                <h3 style="color: #439A86;" v-else>0</h3> 
                <p >分成比例</p>
            </el-col>
            <el-col :span="5">
                <h3>${{ userInfo.params.profitsAmount||WfDataInfo.profitsAmountWf?(userInfo.params.profitsAmount+WfDataInfo.profitsAmountWf):0 }}</h3>
                <p>预估分成金额</p>
            </el-col>
            <el-col :span="5">
                <h3>${{ userInfo.params.totalFloatAmount||WfDataInfo.totalFloatAmountWf?userInfo.params.totalFloatAmount+WfDataInfo.totalFloatAmountWf:0 }}</h3>
                <p>预估浮动分成金额</p>
            </el-col>
          </el-row> 
        </el-card>
        
        <el-card class="margin-t10 notice_box">
          <div class="font18 margin-b10 card_title">
            <span class="til">
              最新公告
              <img class="notice_i" src="~@/assets/img/Mask.png" />
            </span> 
          </div>
          <div class="notice_title">
            {{ noticeData.noticeTitle }}
          </div>
          <pre class="notice_c">{{ noticeData.noticeContent }}</pre>
          <div class="aline-r">
            <img
              class="pointer"
              src="~@/assets/img/CTA.png"
              @click="toNotice"
            />
          </div>
        </el-card>


        <el-row type="flex" justify="space-between" class="margin-t10">
          <el-col :span="24" v-if="hasPermission">
            <el-card class="margin-t10 trans_box ">
              <div class="font18 card_title">
                <span class="til">转账记录</span>
              </div>
              <el-row
                v-for="item in transferData"
                :key="item.id"
                type="flex"
                justify="space-between"
                align="middle"
                class="margin-t10"
              >
                <el-col :span="10">
                  <div class="trans_l">
                    <span v-if="userInfo.userId != item.toUserId">To</span>
                    <span v-else>From</span>
                    {{ item.toUserName }}
                  </div>
                  <div class="font12 text-gray margin-t5">
                    {{ timestampToTime(item.createTime) }}
                  </div>
                </el-col>
                <el-col :span="6">
                  <div
                    :class="[
                      userInfo.userId != item.toUserId
                        ? 'trans_r-'
                        : 'trans_rs',
                      'font12',
                      'trans_r',
                    ]"
                  >
                    <span v-if="userInfo.userId != item.toUserId">-</span>
                    <span v-else>+</span>
                    ${{ b(item.amount) }}
                  </div>
                </el-col>
              </el-row>

              <el-form
                label-position="left"
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="0px"
                class="margin-t20"
              >
                <el-form-item
                  prop="receivingCode"
                  key="receivingCode"
                  class="rad"
                >
                  <el-input
                    size="small"
                    v-model="ruleForm.receivingCode"
                    auto-complete="off"
                    placeholder="收款码"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  prop="transferAmount"
                  key="transferAmount"
                  class="rad select78"
                >
                  <el-input
                    size="small"
                    type="text"
                    v-model="ruleForm.transferAmount"
                    auto-complete="off"
                    placeholder="金额"
                  ></el-input>
                  <el-button
                    type="warning"
                    size="small"
                    :disabled="loading"
                    class="margin-l5"
                    @click="submitForm('ruleForm')"
                  >
                    转账
                  </el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
          <!-- <el-col :span="10">
            <img class="next pointer" src="~@/assets/img/Group.png" />
          </el-col> -->
        </el-row>
      </el-col>
    </el-row>

    <!-- <div class="line_box">
      <div class="line_phone">
        <img src="~@/assets/img/phone_num.png" v-if="show_phoneImage" />
        <img
          src="~@/assets/img/phone_icon.png"
          class="pointer"
          @mouseover="show_phoneImage = true"
          @mouseleave="show_phoneImage = false"
        />
      </div>
    </div> -->

    <el-dialog
      title="详情"
      :close-on-click-modal="false"
      :visible.sync="editFormVisible"
      width="45%"
    >
      <el-form label-width="120px" :model="noticeData" ref="noticeData">
        <el-form-item label="标题">
          {{ noticeData.noticeTitle }}
        </el-form-item>
        <el-form-item label="内容">
          <pre class="n_content">{{ noticeData.noticeContent }}</pre>
        </el-form-item>
        <el-form-item label="创建时间" v-if="noticeData.createTime">
          {{ noticeData.createTime }}
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible" 
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      style="min-height:200px"
      custom-class="walletDialog"
      left>
      
      <div style="text-align: center; padding-bottom: 40px; overflow-y:hidden">
        <img src="@/assets/img/walletImg.png">
        <div style="color: #f74e4e; font-weight: bold; font-size: 20px; padding: 20px 0;">
          钱包余额不足,联系管理员充值!
        </div>
        <el-button type="primary" @click="clickIsWallet" :loading="loadingWallet">看看是否已充值</el-button>
      </div> 
    </el-dialog>

    <!-- balance -->
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  insertCharacter,
  numberNo,
  formatTime,
  timestampToTime,
  formatDate,
  spStr,
} from "../../utils/util";
import { service, format, getUrl } from "../../api/axiosFun";
import Pagination from "../../components/Pagination";
import card1 from "../../assets/img/wallet_bg.png";
import card2 from "../../assets/img/NK_bg.png";
export default {
  data() {
    return {
      centerDialogVisible:false,
      loadingWallet:false,
      loading: false,
      editFormVisible: false,
      userInfo: null,
      show_phoneImage: false,
      b: format,
      numberNo: numberNo,
      formatTime: formatTime,
      formatDate: formatDate,
      timestampToTime: timestampToTime,
      activeId: "",
      carouselList: [
        {
          id: "wallet",
          imgUrl: card1,
        },
        {
          id: "NK",
          imgUrl: card2,
        },
      ],
      typeJson: {
        auth: "消费",
        corrective_auth: "纠正授权",
        verification: "验证",
        void: "撤销",
        refund: "退款",
        corrective_refund: "校正退款",
        recharge: "转入",
        recharge_return: "卡金额退还",
        discard_recharge_return: "销卡退回",
        service_fee: "服务费",
        refund_reversal: "退款撤销",
        fund_in: "汇入",
      },
      editForm: {
        noticeContent: "",
        noticeId: "",
        noticeTitle: "",
        noticeType: 2,
      },
      listData: [],
      transferData: [],
      noticeData: "",
      ruleForm: {
        receivingCode: "",
        transferAmount: "",
      },
      rules: {
        transferAmount: [
          { required: true, message: "请输入转账金额", trigger: "blur" },
          {
            pattern: /^\d+(\.\d{1,2})?$/,
            message: "请输入正整数或者2位数小数",
            trigger: "blur",
          },
        ],
        receivingCode: [
          { required: true, message: "请输入收款码", trigger: "blur" },
        ],
      },
      hasPermission:false,
      hasPermission0:false,
      WfDataInfo:{}
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  created() {
    this.getInfo();
    this.getNotice();
    this.getdata();
    this.getTransfer();
    this.getWfDataInfo();
   
  },
  computed: {
    ...mapGetters(["getUser"]),
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
    },
  },
  methods: {
    clickIsWallet(){
      this.loadingWallet = true
      this.getInfo('isHas');
    },
    getWfDataInfo(){
      service
        .get("/api/photon/getWfDataInfo")
        .then((res) => {
          if (res.code == 0) {
            this.WfDataInfo = res.data;
          }
        })
    }, 
 
    getInfo(type) {   
      service
        .get("/api/photon/getUserInfo")
        .then((res) => {
          if (res.code == 0) {
            this.userInfo = res.data;
            this.hasPermission = this.$hasPermission(this.userInfo,['common'])
            this.hasPermission0 = this.$hasPermission(this.userInfo,['common','user0','user8'])   
            if(this.userInfo.balance>=0){  
              this.centerDialogVisible = false
            }else{
              if(type=='isHas'){
                this.loadingWallet = false;
                this.$message({
                  message: '暂无充值成功！请联系管理员！',
                  type: 'error'
                });
              }
              this.centerDialogVisible = true
            }
           
            this.$store.commit("user", JSON.stringify(res.data));
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    getNotice() {
      let url = getUrl({
        pageNum: 1,
        pageSize: 1,
        orderByColumn: "create_time",
        isAsc: "desc",
      });
      service
        .get("/jwt/getNoticeList" + url)
        .then((res) => {
          if (res.code == 0) {
            this.noticeData = res.rows[0];
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    getdata() {
      let url = getUrl({
        pageNum: 1,
        pageSize: 5,
      });
      service
        .get("/api/photon/transactionList" + url)
        .then((res) => {
          if (res.code == 0) {
            this.listData = res.rows;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    getTransfer() {
      let url = getUrl({
        pageNum: 1,
        pageSize: 2,
      });
      service
        .get("/api/photon/getTransferRecordList" + url)
        .then((res) => {
          if (res.code == 0) {
            this.transferData = res.rows;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    changeCard(index) {
      this.activeId = this.carouselList[index].id;
    },
    toAdd() {
      this.$store.commit("isRecharge", true);
      this.$router.push({ path: "/recharge" });
    },
    toNotice() {
      this.editFormVisible = true;

      // this.$router.push({ path: "/notice" });
    },
    submitForm(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.loading = true;
          let url = getUrl(this.ruleForm);
          service
            .post("/api/photon/transfer" + url)
            .then((res) => {
              this.loading = false;
              if (res.code == 0) {
                this.$message.success("提交成功，请等待审核...");
                this.$refs[name].resetFields();
                this.getTransfer();
              } else {
                this.$message({
                  type: "info",
                  message: spStr(res.msg, "PhotonPay", ""),
                });
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error(spStr(err, "PhotonPay", ""));
            });
        } else {
          return false;
        }
      });
    },
    copyText(text) {
      navigator.clipboard
        .writeText(text)
        .then(() => {
          this.$message.success("复制成功");
        })
        .catch((err) => {
          // 复制失败
          console.error("复制失败");
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.getdata();
    },
  },
};
</script>

<style scoped>
.main_h {
  height: calc(100vh - 90px);
}
.wallet_box {
  height: 100%;
  /* margin-top: 10px; */
  /* padding: 0 25px; */
}
.el-card {
  border-radius: 15px;
}
.card_wallet {
  position: relative;
  padding: 10px 20px 10px 10px;
}
.progressBox{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top:20px;
}
.card_title {
  display: flex;
  justify-content: space-between;
  /* padding-right: 35px; */
}
/deep/.card_card1 .el-card__body {
  padding: 10px;
  box-sizing: border-box;
  height: 520px;
}
.el-carousel,
/deep/.el-carousel .el-carousel__container {
  width: 100%;
  height: 310px;
}
/deep/.el-carousel .el-carousel__indicators,
/deep/.el-carousel .el-carousel__arrow {
  /* display: none; */
}
/deep/.el-carousel .el-carousel__arrow {
  background-color: transparent;
  color: #000;
  font-size: 25px;
}
.card_wallet .card_c {
  width: 100%;
  height: 310px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.card_wallet{
  /* height: 500px; */
}
.receivingCode {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  translate: -25% -50%;
}
.receivingCode span {
  letter-spacing: 3px;
}
.receivingCode img {
  display: inline-block;
  width: 30px;
}
.card_name {
  position: absolute;
  bottom: 45px;
  left: 88px;
  font-size: 20px;
}
.card_time {
  position: absolute;
  bottom: 45px;
  left: 240px;
  font-size: 20px;
}
.r_title {
  margin: 10px 0;
  color: #a3aed0;
}
.staiList {
  display: flex;
  width: 80%;
}
.stat_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 45px;
}
.stat_i {
  width: 40px;
}
.stat_m {
  width: 35px;
  margin-top: 40px;
}
/deep/ .notice_box .el-card__body {
  height: 180px;
}
.notice_i {
  height: 18px;
  vertical-align: middle;
  margin-bottom: 2px;
}
.notice_title {
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 600;
  color: #e6a23c;
}
.notice_c {
  padding: 10px 20px;
  height: 50px;
  line-height: 20px;
  font-weight: 600;
  overflow: hidden;
  color: #a3aed0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/deep/.trans_box .el-card__body {
  box-sizing: border-box;
  height: 295px;
}
.next {
  width: 100%;
  height: 314px;
}
.stat {
  /* padding-left: 40px !important; */
}
.pro_box {
  height: 65px;
  /* width: 72%;
  padding-left: 50px; */
}
.pro_box .el-col {
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
  margin: 0 20px;
}
.pro_box .el-col .aline-c{
  padding-left: 10px; 
  text-align: left;
}

.pro_t {
  font-size: 14px;
  color: #a3a3a3;
}
/deep/ .el-progress--circle .el-progress__text {
  font-size: 18px !important;
  font-weight: 600;
}
.pro_t span {
  color: #439a86;
}
.butL {
  position: absolute;
  bottom: 47px;
  right: 20px;
}
/deep/.order_box .el-card__body {
  box-sizing: border-box;
  height: 180px;
}

.trans_l {
  font-size: 15px;
  font-weight: 600;
  color: #e6a23c;
}
.trans_r {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
}
.trans_rs {
  color: #439a86;
  background-color: #05cd991f;
}
.trans_r- {
  color: #bb4430;
  background-color: #ee5d502a;
}
/deep/.rad .el-input__inner {
  border-radius: 8px;
}
/deep/.rad .el-button__inner {
  transform: none !important;
}
.select78 .el-input {
  width: 78%;
}
.line_box {
  position: absolute;
  bottom: 250px;
  right: 10px;
}

.card_title .til{
  font-size: 20px;
  font-weight: bold;
}
 
.agantBox p{
  font-size: 16px;
}
.agantBox h3{
  font-size: 18px;
  color: #bb4430;
}
</style>
<style >

.walletDialog .el-dialog__body{
  overflow: hidden!important;
}
</style>

 
 